<template>
  <div class="">
    <el-carousel height="719px" class="bg relative" interval="5000">
      <div class="desc relative z-20">
        <div flex text-41 font-700>
          <div mr-118>专业支付解决方案</div>
          <div class="text-#448BF5">熵付通</div>
        </div>
        <div mt-32 mb-38 w-700 class="text-#5F6368 text-16 line-height-28">
          安全、稳定、高效的支付服务平台，为您的业务提供全方位支付接入能力，支持全球主流支付方式，助力业务增长
        </div>
        <div>
          <el-button size="large" type="primary">立即开通</el-button>
          <el-button size="large" type="primary" color="transparent" class="second-btn" @click="contactVisible = true"
            >联系销售</el-button
          >
        </div>
      </div>
      <el-carousel-item v-for="(i, idx) in carouselImgs" :key="idx">
        <img :src="i.src" alt="" h-full w-full />
      </el-carousel-item>
    </el-carousel>
    <advantage></advantage>
    <payTest></payTest>
    <fee></fee>
    <signingSteps></signingSteps>
    <toRegister></toRegister>
    <contact v-model="contactVisible"></contact>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import API from '@/request/api/index'
import advantage from './advantage.vue'
import payTest from './payTest.vue'
import fee from './fee.vue'
import signingSteps from './signingSteps.vue'
import toRegister from './toRegister.vue'
import contact from '@/components/contact/index.vue'
const contactVisible = ref(false)
const baseUrl = import.meta.env.VITE_APP_BASE_API
console.log('被输出值{ baseUrl }的输出结果是：', baseUrl)

/**
 * 轮播图
 */
const carouselImgs = ref([] as any[])
const getBanners = () => {
  API.getBanners().then((res: any) => {
    if (res.code === 200) {
      carouselImgs.value = res.data.map((i: any) => {
        i.src = `${baseUrl.slice(0, -1)}${i.imgUrl}`
        return i
      })
      console.log('被输出值{ carouselImgs }的输出结果是：', carouselImgs.value)
    }
  })
}
const getContactInfo = () => {
  API.getContactInfo().then((res: any) => {
    if (res.code === 200) {
      // console.log('被输出值{ res }的输出结果是：', res)
    }
  })
}
getBanners()
getContactInfo()
</script>
<style lang="scss" scoped>
.bg {
  position: relative;
  background-image: linear-gradient(to bottom, #f8fbff, #e6f0ff);
  overflow: hidden;

  .desc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 120px;
    .el-button {
      width: 126px;
      height: 40px;
    }
    .second-btn {
      color: #448bf5;
      border: 1px solid #448bf5;
      &:hover {
        background-color: #448bf5;
        color: #fff;
      }
    }
  }
}
:deep(.el-carousel__indicator--horizontal button) {
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
</style>
